<template>
    <el-checkbox-group v-model="form[option.prop]" v-bind="option.element">
        <el-checkbox v-for="item in list" :key="item.dictValue" :value="item.dictValue"
            :label="item.dictLabel"></el-checkbox>
    </el-checkbox-group>
</template>
<script setup lang="ts">
import { useDict } from './hooks';
defineOptions({ name: 'XklCheckbox' })
const props = defineProps(['form', 'option'])
const emit = defineEmits(['loaded'])

const { form, option } = props

const dict = option.config.dict

const { list, loaded } = useDict(dict)

loaded(() => {
    if (!dict) {
        list.value = option.config.list.map(item => {
            return {
                dictValue: item.value,
                dictLabel: item.label
            }
        }) || []
    }
    emit('loaded', list.value, (vals) => {
        list.value = vals
    })
})



</script>
<style lang="scss" scoped></style>